

<template>
  <el-tabs v-model="activeName" class="demo-tabs" style="width: 100%;">
    <el-tab-pane label="请求参数" name="param">
      <sc-form-table v-model="props.form.extData.filters" drag-sort :addTemplate="addTemplate">
        <el-table-column width="210" align="center" label="显示名称">
          <template #default="scope">
            <el-input v-model="scope.row.fieldName"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="210" align="center" label="字段名称">
          <template #default="scope">
            <el-input v-model="scope.row.javaName"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="160" align="center" label="占位符">
          <template #default="scope">
            <el-input v-model="scope.row.placeholder"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="130" align="center" label="字段类型">
          <template #default="scope">
            <el-select
                v-model="scope.row.fieldType"
                placeholder="选择类型"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column width="130" align="center" label="控件类型">
          <template #default="scope">
            <el-select
                v-model="scope.row.inputType"
                placeholder="控件类型"
            >
              <el-option
                  v-for="item in inputOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column width="160" align="center" label="是否必传">
          <template #default="scope">
            <el-radio-group v-model="scope.row.required">
              <el-radio-button label="必传" :value="1"/>
              <el-radio-button label="非必传" :value="2"/>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column width="150" align="center" label="显示区域">
          <template #default="scope">
            <el-select v-model="scope.row.area" clearable placeholder="显示区域">
              <el-option label="接口调用" :value="1"/>
              <el-option label="主搜索" :value="2"/>
              <el-option label="扩展搜索" :value="3"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="接口地址" width="200">
          <template #default="scope">
            <el-input v-model="scope.row.queryUrl"></el-input>
          </template>
        </el-table-column>
      </sc-form-table>
      <el-button @click="addFilter" style="margin-top: 15px;">添加过滤字段</el-button>
      <el-button @click="copyFilter" style="margin-top: 15px;">复制过滤字段</el-button>
      <el-button @click="pasteFilter" style="margin-top: 15px;">粘贴过滤字段</el-button>

    </el-tab-pane>
    <el-tab-pane label="显示字段" name="field">
      <sc-form-table v-model="props.form.extData.fields" drag-sort :addTemplate="addFieldTemplate">
        <el-table-column width="200" align="center" label="显示名称">
          <template #default="scope">
            <el-input v-model="scope.row.title"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" label="取值key">
          <template #default="scope">
            <el-input v-model="scope.row.key"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="宽度">
          <template #default="scope">
            <el-input v-model="scope.row.width"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="100" align="center" label="是否显示">
          <template #default="scope">
            <el-switch
                v-model="scope.row.showType"
                :active-value="1"
                :inactive-value="2"
            />
          </template>
        </el-table-column>
        <el-table-column width="120" align="center" label="显示类型">
          <template #default="scope">
            <el-select
                v-model="scope.row.fieldType"
                placeholder="显示类型"
            >
              <el-option label="图片" :value="1"/>
              <el-option label="字符串" :value="2"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column width="120" align="center" label="固定位置">
          <template #default="scope">
            <el-select
                v-model="scope.row.fixed"
                placeholder="选择类型"
            >
              <el-option label="左固定" value="left"/>
              <el-option label="有固定" value="right"/>
              <el-option label="不固定" value="none"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="排序号" width="100">
          <template #default="scope">
            <el-input v-model="scope.row.sortNum"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="导航类型" width="130">
          <template #default="scope">
            <el-radio-group v-model="scope.row.navType">
              <el-radio-button label="跳转" :value="1"/>
              <el-radio-button label="无" :value="2"/>
            </el-radio-group>
          </template>
        </el-table-column>

        <el-table-column align="center" label="跳转地址">
          <template #default="scope">
            <el-input v-model="scope.row.navUrl" :disabled="scope.row.navType===2"></el-input>
          </template>
        </el-table-column>
      </sc-form-table>
      <el-button @click="addField" style="margin-top: 15px;">添加显示字段</el-button>
      <el-button @click="copyField" style="margin-top: 15px;">复制显示字段</el-button>
      <el-button @click="pasteField" style="margin-top: 15px;">粘贴显示字段</el-button>

    </el-tab-pane>
    <el-tab-pane label="排序字段" name="sortField">
      <sc-form-table v-model="props.form.extData.sortNames" drag-sort :addTemplate="addSortTemplate">
        <el-table-column width="200" align="center" label="排序名称">
          <template #default="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column   align="center" label="排序数据库字段">
          <template #default="scope">
            <el-input v-model="scope.row.dbName"></el-input>
          </template>
        </el-table-column>
      </sc-form-table>
      <el-button @click="addSort" style="margin-top: 15px;">添加排序字段</el-button>
      <el-button @click="copySort" style="margin-top: 15px;">复制排序字段</el-button>
      <el-button @click="pasteSort" style="margin-top: 15px;">粘贴排序字段</el-button>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import scFormTable from "@/components/scFormTable/index.vue";

const options = ref([
  {
    label: "字符串",
    value: 1
  },
  {
    label: "字符输入",
    value: 101
  },
  {
    label: "整型",
    value: 2
  },
  {
    label: "长整型",
    value: 3
  },
  {
    label: "浮点数",
    value: 4
  },
  {
    label: "对象",
    value: 9
  },
  {
    label: "字符数组",
    value: 10
  },
  {
    label: "整形数组",
    value: 11
  },
  {
    label: "小数数组",
    value: 12
  },
  {
    label: "BigDecimal",
    value: 5
  },
  {
    label: "日期",
    value: 6
  },
  {
    label: "布尔",
    value: 7
  },
  {
    label: "枚举",
    value: 8
  }

])

const inputOptions=ref([
  {
    label: "多选框",
    value: 6
  },
  {
    label: "日期区间",
    value: 8
  },
  {
    label: "时间区间",
    value: 9
  },
  {
    label: "下拉框",
    value: 2
  },
  {
    label: "输入框",
    value: 1
  },

  {
    label: "日期",
    value: 3
  },
  {
    label: "时间",
    value: 4
  },
  {
    label: "日期时间",
    value: 5
  },
  {
    label: "开关",
    value: 7
  }

])
const addTemplate=ref({
  fieldName: null,
  javaName: null,
  fieldType: null
})
const addFieldTemplate = ref({
  title: null,
  width: null,
  key: null,
  showType:1,
  fieldType:2
})

const addSortTemplate=ref({
  name:null,
  dbName:null
})
const activeName = ref('param')
const props = defineProps({
  form: {
    type: Object,
    default: {}
  },
});
const addField = () => {
  if (!props.form.extData.fields){
    props.form.extData.fields=[];
  }

  props.form.extData.fields.push({
    title: null,
    width: null,
    key: null,
    showType:1,
    fieldType:2
  })
}


const copyField = () => {
  if (props.form.extData.fields.length > 0) {
    //json话过滤参数 复制到剪贴板上
    let json = JSON.stringify(props.form.extData.fields);
    navigator.clipboard.writeText(json).then(function () {
      ElMessage({
        message: '复制成功',
        type: 'success',
      })
    }, function (err) {
      console.error('Async: Could not copy text: ', err);
    });
  }
}

const pasteField = () => {
  navigator.clipboard.readText().then(function (clipText) {
    props.form.extData.fields = [...props.form.extData.fields, ...JSON.parse(clipText)];
    ElMessage({
      message: '粘贴成功',
      type: 'success',
    })
  });
}

const addFilter = () => {
  if (!props.form.extData) {
    props.form.extData = {};
  }
  if (!props.form.extData.filters) {
    props.form.extData.filters = [];
  }
  props.form.extData.filters.push({
    fieldName: null,
    javaName: null,
    fieldType: null
  })
}
const copyFilter = () => {
  if (props.form.extData.filters.length > 0) {
    //json话过滤参数 复制到剪贴板上
    let json = JSON.stringify(props.form.extData.filters);
    navigator.clipboard.writeText(json).then(function () {
      ElMessage({
        message: '复制成功',
        type: 'success',
      })
    }, function (err) {
      console.error('Async: Could not copy text: ', err);
    });
  }
}

const pasteFilter = () => {
  navigator.clipboard.readText().then(function (clipText) {
    props.form.extData.filters = [...props.form.extData.filters, ...JSON.parse(clipText)];
    ElMessage({
      message: '粘贴成功',
      type: 'success',
    })
  });
}

const addSort = () => {
  if (!props.form.extData.sortNames){
    props.form.extData.sortNames=[];
  }
  props.form.extData.sortNames.push({
    name: null,
    dbName: null
  })
}


const copySort = () => {
  if (props.form.extData.fields.length > 0) {
    //json话过滤参数 复制到剪贴板上
    let json = JSON.stringify(props.form.extData.sortNames);
    navigator.clipboard.writeText(json).then(function () {
      ElMessage({
        message: '复制成功',
        type: 'success',
      })
    }, function (err) {
      console.error('Async: Could not copy text: ', err);
    });
  }
}

const pasteSort = () => {
  navigator.clipboard.readText().then(function (clipText) {
    props.form.extData.sortNames = [...props.form.extData.sortNames, ...JSON.parse(clipText)];
    ElMessage({
      message: '粘贴成功',
      type: 'success',
    })
  });
}



</script>
<style scoped>

</style>